// lib/pages/service_capability.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:portal_website/pages/common_header.dart';
import 'package:portal_website/pages/empowerment_platform.dart';

import 'package:flutter/material.dart';
import 'package:portal_website/tool/image_network.dart';

class ServiceCapabilityPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final navItems = [
      {'name': '首页', 'route': '/'},
      {'name': '服务能力', 'route': '/'},
      {'name': '解决方案', 'route': '/'},
      {'name': '成功案例', 'route': '/'},
      {'name': '联系我们', 'route': '/'},
    ];

    return Scaffold(
      backgroundColor: Color(0xFFF5F9FF),
      body: SingleChildScrollView(
        child: Container(
          padding: EdgeInsets.only(top: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 面包屑导航
              Padding(
                padding: EdgeInsets.symmetric(vertical: 15, horizontal: 10),
                child: Text(
                  '首页 > 服务能力',
                  style: TextStyle(
                    color: Color(0xFF666666),
                    fontSize: 14,
                  ),
                ),
              ),

              PageTitle(
                title: "服务能力",
                subtitle:
                    "我们提供全方位的专业服务，助力企业数字化转型和创新发展我们提供全方位的专业服务，助力企业数字化转型和创新发展",
              ),

              // 服务能力概览
              _buildServiceSection(
                title: '核心服务能力',
                description:
                    '创新服务平台整合优质资源，构建了覆盖企业全生命周期的服务体系，为各类企业提供专业、高效的一站式服务。',
                child: _buildServiceGrid(),
              ),

              // 服务详情
              _buildServiceSection(
                title: '服务详情',
                child: Column(
                  children: [
                    _buildDetailItem(
                      title: '互联网营销服务',
                      imageUrl: '',
                      description: [
                        '我们的互联网营销服务团队由资深数字营销专家组成，拥有丰富的行业经验和成功案例。我们采用数据驱动的营销策略，结合最新的数字营销技术，为客户提供全方位的互联网营销解决方案。',
                        '服务内容包括：搜索引擎优化(SEO)、搜索引擎营销(SEM)、社交媒体营销(SMM)、内容营销、电子邮件营销、移动营销、视频营销等。我们通过精准的目标受众定位和效果评估，确保每一分营销投入都能获得最大回报。'
                      ],
                      features: [
                        {'title': '数据驱动', 'desc': '基于大数据分析的精准营销策略，确保营销效果可衡量'},
                        {'title': '全渠道覆盖', 'desc': '整合PC端、移动端、社交媒体等多渠道营销资源'},
                        {'title': '定制化方案', 'desc': '根据企业特点和行业特性制定个性化营销方案'},
                        {'title': '效果保障', 'desc': '严格的KPI考核机制，确保营销目标达成'},
                      ],
                    ),
                    _buildDetailItem(
                      title: '品牌建设服务',
                      imageUrl: '',
                      description: [
                        '品牌是企业最宝贵的无形资产。我们的品牌建设服务从市场调研入手，深入分析行业趋势和竞争格局，帮助企业明确品牌定位，构建独特的品牌形象和品牌价值体系。',
                        '服务内容包括：品牌战略规划、品牌定位、品牌命名、品牌视觉识别系统设计、品牌传播策略、品牌资产管理等。我们通过系统化的品牌建设流程，助力企业打造具有持久生命力的强势品牌。'
                      ],
                      features: [
                        {'title': '战略导向', 'desc': '将品牌建设与企业战略紧密结合，确保品牌发展方向正确'},
                        {'title': '创意设计', 'desc': '专业的设计团队，打造独特而有吸引力的品牌视觉形象'},
                        {'title': '系统化方法', 'desc': '采用国际先进的品牌建设方法论，确保品牌建设效果'},
                        {'title': '长期陪伴', 'desc': '提供品牌长期管理服务，持续提升品牌价值'},
                      ],
                    ),
                    _buildDetailItem(
                      title: '人才培养服务',
                      imageUrl: '',
                      description: [
                        '人才是企业发展的核心动力。我们的人才培养服务基于对企业发展战略和人才现状的深入分析，提供定制化的培训解决方案，帮助企业构建高素质人才队伍。',
                        '服务内容包括：培训需求分析、培训体系设计、课程开发、培训实施、效果评估等。我们拥有丰富的培训资源和专业的培训师资，涵盖管理技能、专业技术、数字化转型等多个领域，满足企业不同层次人才的培养需求。'
                      ],
                      features: [
                        {'title': '需求导向', 'desc': '基于企业实际需求设计培训方案，确保培训针对性'},
                        {'title': '实战教学', 'desc': '理论与实践相结合，注重培养学员解决实际问题的能力'},
                        {'title': '师资雄厚', 'desc': '汇聚行业专家和实战派讲师，确保培训质量'},
                        {'title': '效果跟踪', 'desc': '建立培训效果评估体系，持续优化培训方案'},
                      ],
                    ),
                  ],
                ),
              ),

              // 成功案例
              _buildServiceSection(
                title: '成功案例',
                description: '我们已为众多企业提供了优质服务，助力企业实现业务增长和创新发展。',
                child: _buildCaseList(),
              ),

              // 页脚
              CommonFooter(
                links: [
                  {'name': '关于我们'},
                  {'name': '服务条款'},
                  {'name': '隐私政策'},
                  {'name': '帮助中心'},
                  {'name': '联系我们'},
                ],
                copyright: '© 2025 创新服务平台 版权所有',
                contactInfo:
                    '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：contact@innovationservice.com',
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 构建导航项
  Widget _buildNavItem(String text) {
    return Padding(
      padding: EdgeInsets.only(left: 25),
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontSize: 16,
        ),
      ),
    );
  }

  // 构建服务区块
  Widget _buildServiceSection({
    required String title,
    String? description,
    required Widget child,
  }) {
    return Container(
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8),
        color: Colors.white,
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 3,
            spreadRadius: 1,
            offset: Offset(0, 3),
          ),
        ],
      ),
      padding: EdgeInsets.all(40),
      margin: EdgeInsets.only(bottom: 40),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 区块标题
          Container(
            margin: EdgeInsets.only(bottom: 30),
            padding: EdgeInsets.only(bottom: 15),
            decoration: BoxDecoration(
              border: Border(
                bottom: BorderSide(
                  color: Color(0xFFF0F0F0),
                  width: 2,
                ),
              ),
            ),
            child: Stack(
              children: [
                Text(
                  title,
                  style: TextStyle(
                    color: Color(0xFF1E5799),
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                ),
                Positioned(
                  bottom: -2,
                  left: 0,
                  child: Container(
                    width: 80,
                    height: 2,
                    color: Color(0xFF207CCA),
                  ),
                ),
              ],
            ),
          ),

          // 描述（可选）
          if (description != null)
            Padding(
              padding: EdgeInsets.only(bottom: 30),
              child: Text(
                description,
                style: TextStyle(
                  color: Color(0xFF333333),
                  fontSize: 16,
                  height: 1.6,
                ),
              ),
            ),

          // 子内容
          child,
        ],
      ),
    );
  }

  // 构建服务网格
  Widget _buildServiceGrid() {
    final services = [
      {
        'icon': '🌐',
        'title': '互联网营销',
        'desc': '提供全方位的数字营销解决方案，包括搜索引擎优化、社交媒体营销、内容营销等，帮助企业提升品牌曝光和销售转化。'
      },
      {
        'icon': '🏷️',
        'title': '品牌建设',
        'desc': '从品牌定位、视觉设计到传播策略，提供一站式品牌建设服务，助力企业打造差异化竞争优势。'
      },
      {
        'icon': '👨‍🎓',
        'title': '人才培养',
        'desc': '定制化人才培养方案，涵盖技能培训、管理培训、数字化转型培训等，为企业发展提供人才支撑。'
      },
      {
        'icon': '🔖',
        'title': '信用服务',
        'desc': '提供企业信用评估、信用修复、信用管理等服务，帮助企业建立良好信用形象，提升市场竞争力。'
      },
      {
        'icon': '💰',
        'title': '金融/保险',
        'desc': '整合银行、保险等金融机构资源，为企业提供融资对接、保险方案设计等专业金融服务。'
      },
      {
        'icon': '🔒',
        'title': '网络安全',
        'desc': '提供网络安全评估、防护体系建设、数据安全保护等服务，保障企业信息系统安全稳定运行。'
      },
      {
        'icon': '🎤',
        'title': '会务服务',
        'desc': '专业会议活动策划执行服务，包括活动策划、场地布置、嘉宾邀请、现场管理等全流程服务。'
      },
      {
        'icon': '🛠️',
        'title': '技术支持',
        'desc': '提供技术咨询、系统开发、运维支持等服务，助力企业实现数字化转型和技术创新。'
      },
    ];

    return GridView.count(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width < 768 ? 1 : 2,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 350 / 250,
      children: services.map((service) {
        return _buildServiceCard(
          icon: service['icon']!,
          title: service['title']!,
          description: service['desc']!,
        );
      }).toList(),
    );
  }

  // 构建服务卡片
  Widget _buildServiceCard({
    required String icon,
    required String title,
    required String description,
  }) {
    return Container(
      decoration: BoxDecoration(
        color: Color(0xFFF9FBFF),
        borderRadius: BorderRadius.circular(8),
        border: Border.all(
          color: Color(0xFFE0E9FF),
          width: 1,
        ),
      ),
      padding: EdgeInsets.all(30),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            icon,
            style: TextStyle(fontSize: 48),
          ),
          SizedBox(height: 20),
          Text(
            title,
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 20,
              fontWeight: FontWeight.bold,
              height: 1.6,
            ),
          ),
          SizedBox(height: 15),
          Text(
            description,
            style: TextStyle(
              color: Color(0xFF666666),
              fontSize: 15,
              height: 1.7,
            ),
            maxLines: 3,
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              backgroundColor: Color(0xFF1E5799),
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4),
              ),
            ),
            child: Text(
              '了解详情',
              style: TextStyle(
                color: Colors.white,
                fontSize: 14,
              ),
            ),
          ),
        ],
      ),
    );
  }

  // 构建详情项
  Widget _buildDetailItem({
    required String title,
    required String imageUrl,
    required List<String> description,
    required List<Map<String, String>> features,
  }) {
    return Container(
      margin: EdgeInsets.only(bottom: 50),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          // 标题
          Text(
            title,
            style: TextStyle(
              color: Color(0xFF1E5799),
              fontSize: 22,
              fontWeight: FontWeight.bold,
              height: 1.6,
            ),
          ),
          Container(
            height: 1,
            color: Color(0xFFF0F0F0),
            margin: EdgeInsets.symmetric(vertical: 10),
          ),

          // 内容和图片
          MediaQuery.of(Get.context!).size.width < 768
              ? Column(
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: ImageNetwork(
                        imageUrl,
                        width: double.infinity,
                        height: 250,
                        fit: BoxFit.cover,
                        //
                      ),
                    ),
                    SizedBox(height: 20),
                    _buildDescriptionText(description),
                  ],
                )
              : Row(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: ImageNetwork(
                        imageUrl,
                        width: 400,
                        height: 250,
                        fit: BoxFit.cover,
                      ),
                    ),
                    SizedBox(width: 30),
                    Expanded(
                      child: _buildDescriptionText(description),
                    ),
                  ],
                ),

          // 核心优势
          Padding(
            padding: EdgeInsets.symmetric(vertical: 20),
            child: Text(
              '核心优势',
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.bold,
                color: Color(0xFF333333),
              ),
            ),
          ),

          // 优势列表
          GridView.count(
            shrinkWrap: true,
            physics: NeverScrollableScrollPhysics(),
            crossAxisCount:
                MediaQuery.of(Get.context!).size.width < 768 ? 1 : 2,
            crossAxisSpacing: 20,
            mainAxisSpacing: 20,
            childAspectRatio: 250 / 120,
            children: features.map((feature) {
              return Container(
                decoration: BoxDecoration(
                  color: Color(0xFFF0F7FF),
                  borderRadius: BorderRadius.circular(8),
                  border: Border(
                    left: BorderSide(
                      color: Color(0xFF207CCA),
                      width: 4,
                    ),
                  ),
                ),
                padding: EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      feature['title']!,
                      style: TextStyle(
                        color: Color(0xFF1E5799),
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      feature['desc']!,
                      style: TextStyle(
                        color: Color(0xFF666666),
                        fontSize: 14,
                        height: 1.6,
                      ),
                    ),
                  ],
                ),
              );
            }).toList(),
          ),
        ],
      ),
    );
  }

  // 构建描述文本
  Widget _buildDescriptionText(List<String> paragraphs) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: paragraphs
          .map((para) => Padding(
                padding: EdgeInsets.only(bottom: 16),
                child: Text(
                  para,
                  style: TextStyle(
                    color: Color(0xFF555555),
                    fontSize: 16,
                    height: 1.8,
                  ),
                ),
              ))
          .toList(),
    );
  }

  // 构建案例列表
  Widget _buildCaseList() {
    final cases = [
      {
        'imageUrl': '',
        'title': '某电商企业数字营销项目',
        'desc': '通过精准的数字营销策略，帮助客户实现销售额增长300%，ROI提升5倍。'
      },
      {
        'imageUrl': '',
        'title': '某制造业企业品牌升级项目',
        'desc': '全面升级品牌形象和传播策略，品牌知名度提升200%，市场份额增长15%。'
      },
      {
        'imageUrl': '',
        'title': '某金融机构人才培养项目',
        'desc': '定制化人才培养计划，培养200名复合型金融人才，人才留存率提升40%。'
      },
    ];
    return GridView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
          maxCrossAxisExtent: 400,
          mainAxisExtent: 296,
          mainAxisSpacing: 20,
          crossAxisSpacing: 20),
      itemBuilder: (context, index) {
        Map caseItem = cases[index];
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 5,
                spreadRadius: 1,
                offset: Offset(0, 5),
              ),
            ],
          ),
          child: Column(
            children: [
              ImageNetwork(
                caseItem['imageUrl']!,
                width: double.infinity,
                height: 135,
                fit: BoxFit.cover,
              ),
              Container(
                padding: EdgeInsets.all(20),
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      caseItem['title']!,
                      style: TextStyle(
                        color: Color(0xFF1E5799),
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      caseItem['desc']!,
                      style: TextStyle(
                        color: Color(0xFF666666),
                        fontSize: 14,
                        height: 1.6,
                      ),
                    ),
                    SizedBox(height: 15),
                    TextButton(
                      onPressed: () {},
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(50, 30),
                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                      child: Text(
                        '查看详情 →',
                        style: TextStyle(
                          color: Color(0xFF207CCA),
                          fontWeight: FontWeight.bold,
                          fontSize: 14,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      },
      itemCount: cases.length,
    );

    return GridView.count(
      shrinkWrap: true,
      physics: NeverScrollableScrollPhysics(),
      crossAxisCount: MediaQuery.of(Get.context!).size.width < 768 ? 1 : 3,
      crossAxisSpacing: 30,
      mainAxisSpacing: 30,
      childAspectRatio: 300 / 200,
      children: cases.map((caseItem) {
        return Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            boxShadow: [
              BoxShadow(
                color: Colors.black12,
                blurRadius: 5,
                spreadRadius: 1,
                offset: Offset(0, 5),
              ),
            ],
          ),
          child: Column(
            children: [
              ImageNetwork(
                caseItem['imageUrl']!,
                width: double.infinity,
                height: 100,
                fit: BoxFit.cover,
              ),
              Container(
                padding: EdgeInsets.all(20),
                color: Colors.white,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      caseItem['title']!,
                      style: TextStyle(
                        color: Color(0xFF1E5799),
                        fontSize: 18,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    SizedBox(height: 10),
                    Text(
                      caseItem['desc']!,
                      style: TextStyle(
                        color: Color(0xFF666666),
                        fontSize: 14,
                        height: 1.6,
                      ),
                    ),
                    SizedBox(height: 15),
                    TextButton(
                      onPressed: () {},
                      style: TextButton.styleFrom(
                        padding: EdgeInsets.zero,
                        minimumSize: Size(50, 30),
                        tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                      ),
                      child: Text(
                        '查看详情 →',
                        style: TextStyle(
                          color: Color(0xFF207CCA),
                          fontWeight: FontWeight.bold,
                          fontSize: 14,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        );
      }).toList(),
    );
  }

  // 构建页脚
  Widget _buildFooter(List<String> links, String copyright, String contact) {
    return Container(
      decoration: BoxDecoration(
        color: Color(0xFF1A1A2E),
        borderRadius: BorderRadius.circular(8),
      ),
      padding: EdgeInsets.all(40),
      margin: EdgeInsets.only(top: 50),
      child: Column(
        children: [
          // 链接
          Wrap(
            spacing: 40,
            runSpacing: 10,
            children: links.map((link) {
              return TextButton(
                onPressed: () {},
                style: TextButton.styleFrom(
                  padding: EdgeInsets.zero,
                  minimumSize: Size(50, 30),
                  tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                ),
                child: Text(
                  link,
                  style: TextStyle(
                    color: Color(0xFFA8B2D1),
                    fontSize: 16,
                  ),
                ),
              );
            }).toList(),
          ),
          SizedBox(height: 20),
          // 版权信息
          Text(
            copyright,
            style: TextStyle(
              color: Colors.white,
              fontSize: 16,
              height: 1.6,
            ),
          ),
          SizedBox(height: 10),
          // 联系信息
          Text(
            contact,
            style: TextStyle(
              color: Colors.white,
              fontSize: 14,
              height: 1.6,
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

// class ServiceCapabilityPage extends StatelessWidget {
//   const ServiceCapabilityPage({super.key});
//
//   @override
//   Widget build(BuildContext context) {
//     final navItems = [
//       {'name': '首页', 'route': '/'},
//       {'name': '赋能平台', 'route': '/empowerment'},
//       {'name': '服务能力', 'route': '/service'},
//       {'name': '新闻资讯', 'route': '/news'},
//       {'name': '领导关怀', 'route': '/leadership'},
//     ];
//
//     // 服务数据
//     final services = [
//       {
//         'title': '数字化咨询',
//         'icon': '📊',
//         'description': '提供数字化转型战略规划、现状评估和路径设计，帮助企业明确数字化转型方向和实施步骤。',
//         'features': [
//           {'title': '战略规划', 'desc': '制定符合企业实际的数字化转型战略和实施路线图'},
//           {'title': '现状评估', 'desc': '全面评估企业数字化现状，识别瓶颈和改进空间'},
//           {'title': '需求分析', 'desc': '深入分析业务需求，明确数字化转型目标和优先级'},
//           {'title': '方案设计', 'desc': '设计定制化的数字化解决方案，确保可行性和有效性'},
//         ],
//         'imageUrl': 'https://via.placeholder.com/400x250?text=数字化咨询',
//       },
//       {
//         'title': '技术实施',
//         'icon': '🔧',
//         'description': '提供从技术选型到系统部署的全流程实施服务，确保数字化方案落地见效。',
//         'features': [
//           {'title': '技术选型', 'desc': '根据业务需求推荐最合适的技术栈和解决方案'},
//           {'title': '系统开发', 'desc': '定制开发符合企业需求的数字化系统和应用'},
//           {'title': '系统集成', 'desc': '实现新旧系统的无缝对接和数据互通'},
//           {'title': '部署上线', 'desc': '专业的系统部署和上线服务，确保平稳过渡'},
//         ],
//         'imageUrl': 'https://via.placeholder.com/400x250?text=技术实施',
//       },
//       {
//         'title': '人才培养',
//         'icon': '👨‍🏫',
//         'description': '提供数字化人才培养和技能提升服务，增强企业数字化转型的内生动力。',
//         'features': [
//           {'title': '定制培训', 'desc': '根据企业需求定制数字化技能培训课程'},
//           {'title': '认证体系', 'desc': '提供专业的数字化技能认证，提升人才价值'},
//           {'title': '实战演练', 'desc': '通过实际项目演练提升员工数字化应用能力'},
//           {'title': '知识转移', 'desc': '建立企业内部数字化知识体系和传播机制'},
//         ],
//         'imageUrl': 'https://via.placeholder.com/400x250?text=人才培养',
//       },
//     ];
//
//     // 案例数据
//     final cases = [
//       {
//         'title': '某电商企业数字营销项目',
//         'description': '通过精准的数字营销策略，帮助客户实现销售额增长300%，ROI提升5倍。',
//         'imageUrl': 'https://via.placeholder.com/400x200?text=案例1',
//       },
//       {
//         'title': '某制造业企业品牌升级项目',
//         'description': '全面升级品牌形象和传播策略，品牌知名度提升200%，市场份额增长15%。',
//         'imageUrl': 'https://via.placeholder.com/400x200?text=案例2',
//       },
//       {
//         'title': '某金融机构人才培养项目',
//         'description': '定制化人才培养计划，培养200名复合型金融人才，人才留存率提升40%。',
//         'imageUrl': 'https://via.placeholder.com/400x200?text=案例3',
//       },
//     ];
//
//     return Scaffold(
//       backgroundColor: const Color(0xFFf5f9ff),
//       body: SingleChildScrollView(
//         child: Column(
//           children: [
//             CommonHeader(
//               title: '创新服务平台',
//               navItems: navItems,
//               currentRoute: '/service',
//             ),
//             Container(
//               padding: const EdgeInsets.all(20),
//               constraints: const BoxConstraints(maxWidth: 1200),
//               child: Column(
//                 children: [
//                   const Breadcrumb(
//                     items: [
//                       {'name': '首页', 'route': '/'},
//                       {'name': '服务能力'},
//                     ],
//                   ),
//                   const PageTitle(
//                     title: '服务能力',
//                     subtitle: '我们提供全方位的数字化转型服务，助力企业实现创新发展',
//                   ),
//
//                   // 服务列表
//                   LayoutBuilder(
//                     builder: (context, constraints) {
//                       int crossAxisCount;
//                       if (constraints.maxWidth > 1000) {
//                         crossAxisCount = 3;
//                       } else if (constraints.maxWidth > 600) {
//                         crossAxisCount = 2;
//                       } else {
//                         crossAxisCount = 1;
//                       }
//                       return GridView.count(
//                         crossAxisCount: crossAxisCount,
//                         crossAxisSpacing: 30,
//                         mainAxisSpacing: 30,
//                         shrinkWrap: true,
//                         physics: const NeverScrollableScrollPhysics(),
//                         childAspectRatio: 300 / 400,
//                         children: services.map((service) {
//                           return ServiceCard(service: service);
//                         }).toList(),
//                       );
//                     },
//                   ),
//
//                   // 服务详情
//                   const SizedBox(height: 50),
//                   ...services.map((service) {
//                     return ServiceDetail(service: service);
//                   }).toList(),
//
//                   // 成功案例
//                   Container(
//                     margin: const EdgeInsets.only(top: 50),
//                     child: Column(
//                       crossAxisAlignment: CrossAxisAlignment.start,
//                       children: [
//                         const SectionTitle(title: '成功案例'),
//                         const Text(
//                           '我们已为众多企业提供了优质服务，助力企业实现业务增长和创新发展。',
//                           style: TextStyle(
//                             color: Color(0xFF666666),
//                             fontSize: 16,
//                           ),
//                         ),
//                         const SizedBox(height: 30),
//                         LayoutBuilder(
//                           builder: (context, constraints) {
//                             int crossAxisCount;
//                             if (constraints.maxWidth > 1000) {
//                               crossAxisCount = 3;
//                             } else if (constraints.maxWidth > 600) {
//                               crossAxisCount = 2;
//                             } else {
//                               crossAxisCount = 1;
//                             }
//                             return GridView.count(
//                               crossAxisCount: crossAxisCount,
//                               crossAxisSpacing: 30,
//                               mainAxisSpacing: 30,
//                               shrinkWrap: true,
//                               physics: const NeverScrollableScrollPhysics(),
//                               childAspectRatio: 300 / 300,
//                               children: cases.map((caseItem) {
//                                 return CaseCard(caseItem: caseItem);
//                               }).toList(),
//                             );
//                           },
//                         ),
//                       ],
//                     ),
//                   ),
//                 ],
//               ),
//             ),
//             CommonFooter(
//               links: [
//                 {'name': '关于我们'},
//                 {'name': '服务条款'},
//                 {'name': '隐私政策'},
//                 {'name': '帮助中心'},
//                 {'name': '联系我们'},
//               ],
//               copyright: '© 2025 创新服务平台 版权所有',
//               contactInfo:
//                   '地址：XX省XX市XX区XX路XX号 | 服务热线：400-123-4567 | 邮箱：service@innovationservice.com',
//             ),
//           ],
//         ),
//       ),
//     );
//   }
// }

// 服务卡片组件
class ServiceCard extends StatelessWidget {
  final Map<String, dynamic> service;

  const ServiceCard({super.key, required this.service});

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(8),
        boxShadow: [
          BoxShadow(
            color: Colors.black12,
            blurRadius: 5,
            spreadRadius: 1,
          ),
        ],
      ),
      padding: const EdgeInsets.all(30),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            service['icon'],
            style: const TextStyle(fontSize: 48, color: Color(0xFF207cca)),
          ),
          const SizedBox(height: 20),
          Text(
            service['title'],
            style: const TextStyle(
              fontSize: 20,
              color: Color(0xFF1e5799),
              fontWeight: FontWeight.bold,
              // margin: EdgeInsets.only(bottom: 15),
            ),
          ),
          Text(
            service['description'],
            style: const TextStyle(
              color: Color(0xFF666666),
              fontSize: 15,
              height: 1.7,
              // margin: EdgeInsets.only(bottom: 20),
            ),
          ),
          ElevatedButton(
            onPressed: () {},
            style: ElevatedButton.styleFrom(
              backgroundColor: const Color(0xFF1e5799),
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4),
              ),
            ),
            child: const Text(
              '了解详情',
              style: TextStyle(
                color: Colors.white,
                fontSize: 14,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// 服务详情组件
class ServiceDetail extends StatelessWidget {
  final Map<String, dynamic> service;

  const ServiceDetail({super.key, required this.service});

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(bottom: 50),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            service['title'],
            style: const TextStyle(
              fontSize: 22,
              color: Color(0xFF1e5799),
              fontWeight: FontWeight.bold,
              // paddingBottom: 10,
            ),
          ),
          const Divider(height: 1, color: Color(0xFFf0f0f0)),
          const SizedBox(height: 20),
          Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              ImageNetwork(
                service['imageUrl'],
                width: 400,
                height: 250,
                fit: BoxFit.cover,
                // borderRadius: BorderRadius.circular(8),
              ),
              const SizedBox(width: 30),
              Expanded(
                child: Text(
                  service['description'],
                  style: const TextStyle(
                    fontSize: 16,
                    color: Color(0xFF555555),
                    height: 1.8,
                  ),
                ),
              ),
            ],
          ),
          const SizedBox(height: 20),
          const Text(
            '核心能力',
            style: TextStyle(
              fontSize: 18,
              color: Color(0xFF1e5799),
              fontWeight: FontWeight.bold,
              // margin: EdgeInsets.only(bottom: 20),
            ),
          ),
          GridView.count(
            crossAxisCount: 2,
            crossAxisSpacing: 20,
            mainAxisSpacing: 20,
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            childAspectRatio: 3,
            children: (service['features'] as List<Map<String, String>>)
                .map((feature) => Container(
                      decoration: BoxDecoration(
                        color: const Color(0xFFf0f7ff),
                        borderRadius: BorderRadius.circular(8),
                        border: const Border(
                          left: BorderSide(
                            color: Color(0xFF207cca),
                            width: 4,
                          ),
                        ),
                      ),
                      padding: const EdgeInsets.all(20),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            feature['title']!,
                            style: const TextStyle(
                              fontSize: 16,
                              color: Color(0xFF1e5799),
                              fontWeight: FontWeight.bold,
                              // margin: EdgeInsets.only(bottom: 10),
                            ),
                          ),
                          Text(
                            feature['desc']!,
                            style: const TextStyle(
                              color: Color(0xFF666666),
                              fontSize: 14,
                            ),
                          ),
                        ],
                      ),
                    ))
                .toList(),
          ),
        ],
      ),
    );
  }
}
